import React from "react";
import { Layout, message, ConfigProvider } from "antd";
import axios from "axios";
import qs from "qs";
import Contorl from "./Contorl";
import Search from "./Search";
import List from "./List";
import moment from "moment";
import "moment/locale/zh-cn";
import locale from "antd/lib/locale/zh_CN";

import "../mock/meetingdata";

const { Header, Footer, Content } = Layout;

export default class MeetingArrange extends React.Component {
  constructor(props) {
    super(props);
    this.getDataSource = this.getDataSource.bind(this);
    this.changePage = this.changePage.bind(this);
    this.onSearch = this.onSearch.bind(this);
    this.changeDataSource = this.changeDataSource.bind(this);
    this.changeSelect = this.changeSelect.bind(this);
    this.changeRows = this.changeRows.bind(this);
    this.delDataSource = this.delDataSource.bind(this);
    this.state = {
      startDate: "",
      endDate: "",
      time: "",
      host: "",
      join: "",
      page: 1,
      rows: 10,
      total: "",
      dataSource: [],
      selectedRowKeys: [],
    };
  }

  getDataSource() {
    const { startDate, endDate, time, host, join, page, rows } = this.state;
    console.log({
      startDate: startDate,
      endDate: endDate,
      meetingTime: time,
      host: host,
      participator: join,
      page: page,
      rows: rows,
    });
    /**初始化页面数据 */
    axios
      .post(
        "fetchweekmeeting.rst",
        qs.stringify({
          startDate: startDate,
          endDate: endDate,
          meetingTime: time,
          host: host,
          participator: join,
          page: page,
          rows: rows,
        })
      )
      .then((res) => {
        let response = res.data;
        console.log(response);
        if (response.resultCode === 0) {
          console.log(response.result.total);
          let data = response.result.data;
          this.setState({
            dataSource: data.map((data, index) => {
              return {
                key: data.id,
                enable: data.enable,
                meetingKey: Number(index + 1 + rows * (page - 1)),
                meetingDate: data.meetingDate,
                meetingTime: data.meetingTime,
                meetingAddress: data.locale,
                meetingContent: data.theme,
                meetingHost: data.host,
                meetingJoin: data.participator.split(","),
                remindTime: data.remindTime,
                meetingRoom: data.meetingRoom,
              };
            }),
            total: response.result.total,
          });
        } else {
          // alert('数据请求失败')
          message.error("数据请求失败");
        }
      })
      .catch((error) => {
        console.log(error);
        // alert('数据请求失败')
        message.error("数据请求失败");
      });
  }

  componentDidMount() {
    /**获取教职工列表 */
    /**初始化页面数据 */
    this.getDataSource();
  }

  /**翻页 */
  changePage(current) {
    setTimeout(() => {
      this.setState({ page: current });
      this.getDataSource();
    }, 0);
  }

  /**复选框变化 */
  changeSelect(selectVal) {
    this.setState({ selectedRowKeys: selectVal });
    console.log(selectVal);
  }

  /**切换展示条数 */
  changeRows(current, pageSize) {
    console.log(current, pageSize);
    setTimeout(() => {
      this.setState({ rows: pageSize });
      // this.getDataSource();
    }, 0);
  }

  /**search表单提交，检索会议 */
  onSearch(values) {
    // console.log(values);
    let startDate = "";
    let endDate = "";
    let time = "";
    if (values.date) {
      startDate = values.date[0].format("YYYY-MM-DD");
      endDate = values.date[1].format("YYYY-MM-DD");
    }
    if (values.time) {
      time = values.time.format("HH:mm");
    }
    function getHost(value) {
      if (value) {
        // let arr = value.replace("，", ",").split(",");
        // return arr.map((val) => {
        // });
        return value.trim();
      }
    }
    /**修改当前状态 */
    this.setState({
      startDate: startDate,
      endDate: endDate,
      time: time,
      host: getHost(values.host),
      join: getHost(values.join),
      page: 1,
    });
    /**获取当前状态，并重新加载数据 */
    this.getDataSource();
  }

  /**修改会议表格的数据源 */
  changeDataSource(newValue) {
    this.setState({
      dataSource: newValue,
    });
  }

  /**删除表格数据 */
  delDataSource(delVal) {
    if (delVal !== -1) {
      /**普通删除 */
      // console.log('need delete:' + delVal)
      // let data = [...this.state.dataSource]
      // for (var i = 0; i < data.length; i++) {
      //     delVal.forEach((item) => {
      //         if (data[i].key == item) {
      //             data.splice(i, 1)
      //             return;
      //         }
      //     })
      // }
      // this.setState({
      //     dataSource: data
      // })
    } else {
      /**全部删除 */
      this.setState({
        dataSource: [],
        page: 1,
      });
    }
  }

  render() {
    const { dataSource, total, rows, page, selectedRowKeys } = this.state;
    return (
      <ConfigProvider locale={locale}>
        <Layout>
          <Header>
            <Search locale={locale} onSearch={this.onSearch} />
          </Header>
          <Content>
            <List
              dataSource={dataSource}
              total={total}
              rows={rows}
              current={page}
              changePage={this.changePage}
              changeSelect={this.changeSelect}
              changeRows={this.changeRows}
              changeDataSource={this.changeDataSource}
              getDataSource={this.getDataSource}
            />
          </Content>
          <Footer>
            <Contorl
              changeDataSource={this.changeDataSource}
              selectedRowKeys={selectedRowKeys}
              delDataSource={this.delDataSource}
              getDataSource={this.getDataSource}
            />
          </Footer>
        </Layout>
      </ConfigProvider>
    );
  }
}
